<template>
  <div class="insure">
    <div class="top">
      <div class="titleLeft">
        <i class="iconfont icon-liuchengtu"></i>
        {{pageName}}
      </div>
      <div class="btnBox">
        <el-button type="primary" size="mini" plain :disabled="formDataList.length === 0"><i class="icon-chayan iconfont icon"></i>预览</el-button>
        <el-button type="success" size="mini" plain @click="saveClick" :disabled="formDataList.length === 0"><i class="icon-cunchu iconfont icon"></i>保存</el-button>
        <el-button type="danger" size="mini" plain :disabled="formDataList.length === 0"><i class="icon-suyuan iconfont icon"></i>清空</el-button>
      </div>
    </div>
    <div class="bottom">
      <div class="panelBox">
        <div class="components-list">
          <div v-for="(paneItem, index) in panelList" :key="index">
            <div class="panelTitle">{{paneItem.title}}</div>
            <draggable class="components-draggable" :list="paneItem.list" :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :sort="false" draggable=".components-item" :clone="cloneComponent" @end="onEnd" dragClass="dragClass">
              <div v-for="(item, index) in paneItem.list" :key="index" class="components-item" @dblclick="addComponent(item)">
                <PanelItem :itemData="item"></PanelItem>
              </div>
            </draggable>
          </div>

        </div>
      </div>
      <div class="operate">
        <el-scrollbar class="scrollbar">
          <PhoneCtn>
            <!-- {{drawingList}} -->
            <van-form @submit="onSubmit" :show-error-message="true" class="vanForm">
              <draggable scroll class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
                <!-- <draggableItem v-for="(element, index) in drawingList" :key="element.renderKey" :drawing-list="drawingList" :element="element" :index="index" :active-id="activeId" :form-conf="formConf" @activeItem="activeFormItem" @copyItem="drawingItemCopy" @deleteItem="drawingItemDelete" /> -->
                <draggableItem :class="element.formId === activeId ? 'active' : ''" v-for="element in drawingList" :key="element.renderKey" :element="element" @click.native="currentClick(element)" />
              </draggable>
              <div v-show="!drawingList.length" class="empty-info">
                从左侧拖入或双击组件进行表单设计
              </div>
            </van-form>
          </PhoneCtn>
        </el-scrollbar>
      </div>
      <div class="config">
        <Config></Config>
      </div>
    </div>
    <DialogSave :visible.sync="visible"></DialogSave>
  </div>
</template>

<script>
import { panelList } from './data'
import draggable from 'vuedraggable'
import PanelItem from './components/PanelItem'
import PhoneCtn from './components/PhoneCtn'
import draggableItem from './components/draggableItem'
import Config from './components/config'
import { mapState, mapMutations, mapGetters } from 'vuex'
import DialogSave from './components/dialogSave'

let tempActiveData
export default {
  name: 'insure',
  components: {
    draggable,
    PanelItem,
    PhoneCtn,
    draggableItem,
    Config,
    DialogSave
  },
  data() {
    return {
      panelList,
      // drawingList: [],
      idGlobal: 100,
      activeData: {},
      visible: false
    }
  },
  watch: {
    // drawingList(val) {
    //   this.SETFORMDATA(val)
    // }
  },
  computed: {
    ...mapState('pageData', ['activeFormData', 'formDataList', 'pageName']),
    ...mapGetters('pageData', ['activeId']),
    drawingList() {
      return this.formDataList
    }
  },
  methods: {
    ...mapMutations('pageData', ['SETFORMDATA', 'SETACTIVE', 'DEL', 'ADDFORM']),

    onEnd(obj, a) {
      if (obj.from !== obj.to) {
        this.SETACTIVE(tempActiveData)
      }
    },
    onSubmit() {},
    clone() {},
    drawingItemCopy() {},
    // 复制元素
    cloneComponent(origin) {
      const timestamp = +new Date()
      const clone = JSON.parse(JSON.stringify(origin))
      this.idGlobal++
      clone.formId = String(timestamp)
      clone.renderKey = String(timestamp) // 改变renderKey后可以实现强制更新组件
      clone.field = `field${this.idGlobal}`
      // if (clone.defaultValue) clone.vModel = clone.defaultValue
      clone.placeholder !== undefined && (clone.placeholder += clone.label)
      tempActiveData = clone
      return clone
    },
    currentClick(element) {
      this.SETACTIVE(element)
    },
    addComponent(item) {
      const clone = this.cloneComponent(item)
      this.ADDFORM(clone)
    },
    saveClick() {
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
$lighterBlue: #409eff;
$borderColor: #f1e8e8;

.insure {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  .top {
    border-bottom: solid 1px $borderColor;
    display: flex;
    padding: 5px 10px;
    .titleLeft {
      font-size: 16px;
      font-weight: bold;
      color: $lighterBlue;
      line-height: 28px;
      i {
        font-size: 14px;
        font-weight: normal;
      }
    }
    .btnBox {
      margin-left: auto;
      .icon {
        position: relative;
        top: 1px;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        margin-right: 2px;
      }
    }
  }
  .bottom {
    flex: 1;
    display: flex;
    .panelBox {
      width: 300px;
      background: #fff;
      .panelTitle {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 8px;
        &::before {
          content: ' ';
          display: inline-block;
          height: 14px;
          width: 3px;
          background: $lighterBlue;
          margin: 0 3px 0 3px;
          position: relative;
          top: 2px;
        }
      }
      .components-draggable {
        padding-bottom: 20px;
      }
      .components-list {
        padding: 8px;
        box-sizing: border-box;
        height: 100%;
        .components-item {
          display: inline-block;
          width: 48%;
          margin: 1%;
          transition: transform 0ms !important;
        }
      }
    }
    .operate {
      flex: 1;
      border-left: solid 1px $borderColor;
      border-right: solid 1px $borderColor;
      height: calc(100vh - 125px);
      .scrollbar {
        height: 100%;
      }

      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .drawing-board {
        min-height: 603px;
      }
    }
    .config {
      width: 350px;
      background: #fff;
    }
  }
  .sortable-ghost {
    opacity: 0.8;
    color: #fff !important;
    background: #42b983 !important;
  }
  .empty-info {
    position: absolute;
    top: 46%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 16px;
    color: #ccb1ea;
    letter-spacing: 4px;
  }
  // 设置拖拽颜色
  .operate {
    .sortable-ghost {
      width: 100%;
      padding-bottom: 40px;
      border-top: solid 2px #4aba9a !important;
    }
    .sortable-chosen {
      .components-body {
        border-color: transparent;
        padding: 0 10px;
        border-radius: 0;
      }
      background: $lighterBlue !important;
    }
    .sortable-drag {
      background: transparent !important;
      color: #fff !important;
    }
  }
}
</style>